<template>
  <el-dialog title="销售人员信息" v-model="showDialog" :width="dialogWidth" :append-to-body="true" :close-on-click-modal="false">
    <div class="bform">
      <div class="h1">
        <div><el-input v-model="ser.key" @blur="search"></el-input></div>
      </div>
      <div class="b1">
        <div v-for="item in list" :key="item.id" class="item" @click.stop="itemClick(item)" :data-item="item">
          {{ item.name }}
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script type="text/javascript">
var fun = function () {}
export default {
  name: 'Dialog_Saler',
  props: {
    orgId: {
      type: Number,
      default: () => 0,
    },
    key: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      ser: { key: '' },
      list: [],
      showDialog: false,
      dialogWidth: window.innerWidth > 768 ? '768px' : '100%',
    }
  },
  methods: {
    show() {
      return new Promise((resolve) => {
        this.ser.key = ''
        this.showDialog = true
        this.list = []
        this.search()
        fun = (obj) => {
          resolve(obj)
        }
      })
    },
    search() {
      this.$api.saler.searchname(this.orgId, this.ser.key).then(({ msg }) => {
        this.list = msg
      })
    },
    itemClick(item) {
      this.showDialog = false
      fun(item)
    },
  },
}
</script>
<style lang="scss" scoped>
.bform {
  width: 100%;
  height: 500px;
  display: grid;
  grid-template-rows: 50px 1fr;

  .h1 {
    display: grid;
    grid-template-columns: 1fr 100px;
  }

  .b1 {
    overflow-y: auto;

    .item {
      height: 40px;
      line-height: 40px;
      text-indent: 10px;
      font-size: 16px;
      cursor: pointer;

      &:hover {
        background-color: #00000010;
        font-weight: bold;
      }
    }
  }
}
</style>
